<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }

        #dropDownButton {
            float: left;
            min-width: 85%;
        }

    </style>
    <style>
        .el-dropdown {
            vertical-align: top;
        }

        .el-dropdown + .el-dropdown {
            margin-left: 15px;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>

<body>

<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['2']">
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>博客系统</template>
                    <el-menu-item-group>
                        <template slot="title">分类功能</template>
                        <el-menu-item index="2-1" @click="categoryFindall">分类表</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="博客功能">
                        <el-menu-item index="2-3" @click="blogFindall">博客表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>新增</el-dropdown-item>
                        <!--                        <el-dropdown-item :on-change="test">aa</el-dropdown-item>-->
                        <!--                        <el-dropdown-button type="success" round @click="test">清屏</el-dropdown-button>-->
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>
            <el-button type="success" round @click="test">清屏</el-button>

            <template>
                <el-main
                        id="categoryTable"
                        style="display: none"
                >
                    <el-row>
                        <el-button type="success" round @click="categoryListVisible = true">添加</el-button>
                        <el-dialog
                                title="添加"
                                :visible.sync="categoryListVisible"
                                width="30%"
                                :before-close="handleClose">
                        <span>
                            <el-input v-model="categoryName"
                                      placeholder="分类名长度不能大于20">"请输入分类名"</el-input>
                        </span>
                            <span slot="footer" class="dialog-footer">
                             <el-button @click="categoryListVisible = false">取 消</el-button>
                             <el-button type="primary" @click="categoryAdd">确 定</el-button>
                        </span>
                        </el-dialog>
                    </el-row>
                    <el-table
                            :data="categories"
                            style="width: 100%">
                        <el-table-column
                                prop="categoryId"
                                label="ID"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="categoryName"
                                label="分类名"
                        >
                        </el-table-column>
                        <el-table-column
                                label="操作"
                        >

                            <template slot-scope="scope">
                                <el-button
                                        type="primary"
                                        icon="el-icon-edit"
                                        @click="categoryUpdateInterface(scope.$index, scope.row)"
                                        circle></el-button>
                                <el-button
                                        type="danger"
                                        icon="el-icon-delete"
                                        type="danger"
                                        @click="ifCategoryDelete(scope.$index, scope.row)"
                                        circle></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-dialog title="更新分类" :visible.sync="categoryEditVisible">
                        <el-input
                                title="ID"
                                v-model="categoryId"
                                :disabled="true">
                        </el-input>
                        <el-input title="分类名" v-model="categoryName" placeholder="分类名不能大于20个字"></el-input>
                        <span slot="footer" class="dialog-footer">
                             <el-button @click="categoryEditVisible = false">取 消</el-button>
                             <el-button type="primary" @click="categoryUpdate">确 定</el-button>
                        </span>
                    </el-dialog>

                    <el-dialog
                            title="删除提示"
                            :visible.sync="categoryDeleteVisible"
                            width="30%"
                            :before-close="handleClose">
                        <span>你确定要删除这条数据吗？</span>
                        <span slot="footer" class="dialog-footer">
                        <el-button @click="categoryDeleteVisible = false">取 消</el-button>
                        <el-button type="primary" @click="categoryDelete">确 定</el-button>
                         </span>
                    </el-dialog>
                </el-main>
            </template>


            <template>
                <el-main
                        id="blogTable"
                        style="display: none"
                >
                    <el-row>
                        <el-button type="success" round @click="beforeBlogAdd">添加</el-button>
                        <el-dialog
                                title="添加"
                                :visible.sync="blogListVisible"
                                width="30%"
                                :before-close="handleClose">
                        <span>
                           <template>
                            <el-select
                                    v-model="bcategoryId"
                                    placeholder="请选择"
                                    class="selectType"
                                    autocomplete="off"
                                    @change="addCategoryId">
                                <el-option
                                        v-for="item in categories"
                                        :key="item.categoryId"
                                        :label="item.categoryName"
                                        :value="item.categoryId">
                                </el-option>
                            </el-select>
                        </template>

                            <!--                            <el-input v-model="bcategoryId" placeholder="分类ID必须存在">"请输入分类ID"</el-input>-->
                            <el-input v-model="title" placeholder="标题长度不能大于50">"请输入标题"</el-input>
                            <!--                            <el-input v-model="content" placeholder="内容不能为空">"请输入内容"</el-input>-->
                                                    <el-input
                                                            type="textarea"
                                                            autosize
                                                            placeholder="请输入内容"
                                                            v-model="content">
                        </el-input>
                            <el-input v-model="author" placeholder="作者长度不能大于10">"请输入作者"</el-input>
                        </span>
                            <span slot="footer" class="dialog-footer">
                             <el-button @click="blogListVisible = false">取 消</el-button>
                             <el-button type="primary" @click="blogAdd">确 定</el-button>
                        </span>
                        </el-dialog>
                    </el-row>
                    <el-table
                            :data="blogs"
                            style="width: 100%">
                        <el-table-column
                                prop="blogId"
                                label="ID">
                        </el-table-column>
                        <el-table-column
                                prop="categoryName"
                                label="分类名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="title"
                                label="标题">
                        </el-table-column>

                        <el-table-column
                                prop="author"
                                label="作者">
                        </el-table-column>
                        <el-table-column
                                prop="createTime"
                                label="更新时间">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                        >
                            <template slot-scope="scope">
                                <el-button
                                        type="primary"
                                        icon="el-icon-edit"
                                        @click="blogUpdateInterface(scope.$index, scope.row)"
                                        circle></el-button>
                                <el-button
                                        type="danger"
                                        icon="el-icon-delete"
                                        type="danger"
                                        @click="ifBlogDelete(scope.$index, scope.row)"
                                        circle></el-button>
                            </template>
                        </el-table-column>
                    </el-table>


                    <el-dialog title="博客更新" :visible.sync="blogEditVisible">
                        <el-input
                                v-model="blogId"
                                :disabled="true">
                        </el-input>

                        <template>
                            <el-select
                                    v-model="bcategoryId"
                                    placeholder="请选择"
                                    class="selectType"
                                    autocomplete="off"
                                    @change="updateCategoryId">
                                <el-option
                                        v-for="item in categories"
                                        :key="item.categoryId"
                                        :label="item.categoryName"
                                        :value="item.categoryId">
                                </el-option>
                            </el-select>
                        </template>
                        <el-input v-model="title" placeholder="标题长度不能大于50"></el-input>
                        <!--                        <el-input v-model="content" placeholder="内容"></el-input>-->
                        <el-input
                                type="textarea"
                                autosize
                                placeholder="请输入内容"
                                v-model="content">
                        </el-input>
                        <el-input v-model="author" placeholder="作者名字长度不能大于10"
                        ></el-input>
                        <span slot="footer" class="dialog-footer">
                             <el-button @click="blogEditVisible = false">取 消</el-button>
                             <el-button type="primary" @click="blogUpdate">确 定</el-button>
                        </span>
                    </el-dialog>

                    <el-dialog
                            title="删除提示"
                            :visible.sync="blogDeleteVisible"
                            width="30%"
                            :before-close="handleClose">
                        <span>你确定要删除这条数据吗？</span>
                        <span slot="footer" class="dialog-footer">
                        <el-button @click="blogDeleteVisible = false">取 消</el-button>
                        <el-button type="primary" @click="blogDelete">确 定</el-button>
                         </span>
                    </el-dialog>
                </el-main>
            </template>


        </el-container>
    </el-container>


    <!--    prop="address"-->


</div>


</body>
<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/axios/axios.min.js"></script>
<script src="../plugins/element-ui/index.js"></script>
<script src="../js/request.js"></script>
<script src="../api/blog.js"></script>
<script src="../api/category.js"></script>
<script>
    new Vue({
        el: "#app",

        data() {
            return {
                categoryName: '',
                blogId: '',
                categoryId: '',
                bcategoryId: '',
                title: '',
                content: '',
                author: '',
                categoryList: 'none',
                blogList: 'none',
                categoryDeleteVisible: false,
                blogDeleteVisible: false,
                categoryListVisible: false,
                blogListVisible: false,
                categoryEditVisible: false,
                blogEditVisible: false,
                categories: [],
                blogs: [],
                blog: '',
                category: '',
                info: '',
                value: ''
            }
        },
        mounted() {

        },

        methods: {
            beforeBlogAdd() {
                this.bcategoryId = '';
                this.title = '';
                this.content = '';
                this.author = '';
                this.getcategories();
                this.blogListVisible = true;
            },
            updateCategoryId(value) {
                this.bcategoryId = value;
            },
            addCategoryId(value) {
                this.bcategoryId = value;
            },
            test() {
                categoryTable.style.display = 'none';
                blogTable.style.display = 'none'
            },
            handleClick(info) {
                // console.log(info);
                this.bcategoryId = info.categoryName;
                this.info = info;
                // alert('button click');
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            categoryFindall() {
                blogTable.style.display = 'none';
                categoryTable.style.display = 'block';
                categoryFindAllApi().then(res => {
                    this.categories = res.data.data;
                })
            },
            blogFindall() {
                categoryTable.style.display = 'none'
                blogTable.style.display = 'block';
                blogFindAllApi().then(res => {
                    this.blogs = res.data.data;
                })
            },
            categoryAdd() {
                categoryAddApi({
                    "categoryName": this.categoryName
                }).then(res => {
                    this.categoryName = '';
                    if (res.data.flag) {
                        this.categoryListVisible = false;
                        this.categoryFindall();
                    } else {
                        this.$message.error('添加失败');
                    }
                })
            },
            getcategories() {
                categoryFindAllApi().then(res => {
                    // console.log(111111111)
                    this.categories = res.data.data;
                })
            },
            blogAdd() {
                blogAddApi({
                    "categoryId": this.bcategoryId,
                    "title": this.title,
                    "content": this.content,
                    "author": this.author,
                }).then(res => {
                    if (res.data.flag) {
                        this.bcategoryId = '';
                        this.title = '';
                        this.blogListVisible = false;
                        this.content = '';
                        this.blogFindall();
                        this.author = '';
                    } else {
                        this.$message.error('添加失败');
                    }
                })
            },
            categoryUpdateInterface(index, row) {
                this.categoryEditVisible = true;
                this.categoryId = row.categoryId;
                this.categoryName = row.categoryName;
            },
            blogUpdateInterface(index, row) {
                this.blogId = row.blogId;
                console.log(this.blogId);
                blogFindByIdApi(row.blogId).then(res => {
                    result = res.data.data;
                    this.bcategoryId = result.categoryId;
                    this.title = result.title;
                    this.content = result.content;
                    this.author = result.author;
                })
                this.getcategories();
                this.blogEditVisible = true;

            },
            categoryUpdate() {
                categoryUpdateApi({
                    "categoryId": this.categoryId,
                    "categoryName": this.categoryName,
                }).then(res => {
                    this.categoryName = '';
                    if (res.data.flag) {
                        this.categoryEditVisible = false;
                        this.categoryFindall();
                    } else {
                        this.$message.error('修改失败');
                    }
                })
            },
            blogUpdate() {
                // this.bcategoryId=this.info.categoryId;
                blogUpdateApi({
                    "blogId": this.blogId,
                    "categoryId": this.bcategoryId,
                    "title": this.title,
                    "content": this.content,
                    "author": this.author,
                }).then(res => {
                    this.title = '';
                    this.content = '';
                    this.author = '';
                    if (res.data.flag) {
                        this.blogEditVisible = false;
                        this.blogFindall();
                    } else {
                        this.$message.error('修改失败');
                    }
                })
            },
            ifCategoryDelete(index, row) {
                this.categoryDeleteVisible = true;
                this.category = row;
            },
            categoryDelete() {
                categoryDeleteApi(this.category.categoryId).then(res => {
                    if (res.data.flag) {
                        this.categoryFindall();
                        this.categoryDeleteVisible = false;
                    } else {
                        this.$message.error('删除失败');
                    }
                })
            },
            ifBlogDelete(index, row) {
                this.blogDeleteVisible = true;
                this.blog = row;
            },
            blogDelete() {
                blogDeleteApi(this.blog.blogId).then(res => {
                    if (res.data.flag) {
                        this.blogDeleteVisible = false;
                        this.blogFindall();
                    } else {
                        this.$message.error('删除失败');
                    }
                })
            }
        }
    })
</script>


</html>